<app-page-header [pageHeaderInfo]="pageHeaderInfo" />

<div class="normal-table-wrap">
  <div nz-row [nzGutter]="[32, 16]">
    <div nz-col nzSpan="24">
      <nz-card class="m-b-10" nzSize="default" [nzTitle]="nzBasicTitle">
        <nz-descriptions nzBordered [nzColumn]="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }">
          <nz-descriptions-item nzTitle="用户名">test</nz-descriptions-item>
          <nz-descriptions-item nzTitle="昵称">test-VB</nz-descriptions-item>
          <nz-descriptions-item nzTitle="联系电话">15695909xxx</nz-descriptions-item>
          <nz-descriptions-item nzTitle="邮箱">190848757&#64;qq.com</nz-descriptions-item>
          <nz-descriptions-item nzTitle="地址">厦门市思明区</nz-descriptions-item>
        </nz-descriptions>
      </nz-card>

      <nz-card class="m-b-10" nzSize="default" [nzTitle]="nzVerticalTitle">
        <nz-descriptions nzBordered nzLayout="vertical" [nzColumn]="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 2 }">
          <nz-descriptions-item nzTitle="用户名">test</nz-descriptions-item>
          <nz-descriptions-item nzTitle="昵称">test-VB</nz-descriptions-item>
          <nz-descriptions-item nzTitle="联系电话">15695909xxx</nz-descriptions-item>
          <nz-descriptions-item nzTitle="邮箱">190848757&#64;qq.com</nz-descriptions-item>
          <nz-descriptions-item nzTitle="地址">厦门市思明区</nz-descriptions-item>
        </nz-descriptions>
      </nz-card>

      <nz-card class="m-b-10" nzSize="default" nzTitle="userDescription">
        <nz-descriptions nzBordered [nzColumn]="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }">
          <nz-descriptions-item nzTitle="用户名">test</nz-descriptions-item>
          <nz-descriptions-item nzTitle="昵称">test-VB</nz-descriptions-item>
          <nz-descriptions-item nzTitle="联系电话">15695909xxx</nz-descriptions-item>
          <nz-descriptions-item nzTitle="邮箱">190848757&#64;qq.com</nz-descriptions-item>
          <nz-descriptions-item nzTitle="地址">厦门市思明区</nz-descriptions-item>
        </nz-descriptions>
      </nz-card>

      <nz-card class="m-b-10" nzSize="default" nzTitle="无边框">
        <nz-descriptions [nzColumn]="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }">
          <nz-descriptions-item nzTitle="用户名">test</nz-descriptions-item>
          <nz-descriptions-item nzTitle="昵称">test-VB</nz-descriptions-item>
          <nz-descriptions-item nzTitle="联系电话">15695909xxx</nz-descriptions-item>
          <nz-descriptions-item nzTitle="邮箱">190848757&#64;qq.com</nz-descriptions-item>
          <nz-descriptions-item nzTitle="地址">厦门市思明区</nz-descriptions-item>
        </nz-descriptions>
      </nz-card>
    </div>
  </div>

  <ng-template #nzBasicTitle>
    <div>
      基础示例
      <span nz-tooltip nzTooltipTitle="帮助"><i nz-icon nzTheme="outline" nzType="question-circle"></i></span>
    </div>
  </ng-template>

  <ng-template #nzVerticalTitle>
    <div>
      垂直示例
      <span nz-tooltip nzTooltipTitle="帮助"><i nz-icon nzTheme="outline" nzType="question-circle"></i></span>
    </div>
  </ng-template>
</div>
